前端开发（进阶） v4.0.0

Nanodegree key: nd001-cn-advanced

Version: 4.0.0

Locale: zh-cn

进一步夯实你的前端开发高级技能，完成一系列实战项目，成为一名独当一面的前端工程师！

Content

Part 01 : 纳米学位新生营

开始学习纳米学位课程，并了解如何充分利用优达学城的资源！

Module 01: 纳米学位新生营
- Lesson 01: 纳米学位新生营
  
  了解什么是纳米课程，什么是优等生社群以及如何最好的利用优达学城的资源

Part 02 : 记忆游戏

你将构建一款外观时尚、设计很棒、功能多样的记忆游戏！这个项目将是你第一次把 HTML CSS 和 JavaScript 技能完全运用到一个大型项目。

相关技能：面向对象的 JavaScript，HTML，CSS

Module 01: 面向对象的 JavaScript
- Lesson 01: 作用域
  
  跟随 Marcus Phillips 和 Mike Wales 学习什么是作用域（scopes），以及为什么使用 JavaScript 时你需要注意它。
- Lesson 02: 闭包
  
  学习 JavaScript 的一个难点——闭包。你将学习如何利用闭包保留某个函数及其环境的访问权限，即使该函数已经执行完毕。
- Lesson 03: 'this' 关键字
  
  学习 this 关键字的重要性，了解当你试图在代码中使用它时可能遇到的问题。
- Lesson 04: 原型链
  
  深入学习原型链，理解 JavaScript 如何利用原型链来管理对象及其属性。
- Lesson 05: 对象修饰模式
  
  学习你的第一段面向对象的 JavaScript 代码——使用对象修饰模式，来尽量减少你的项目中的代码的重复使用。
- Lesson 06: 函数类
  
  拓展修饰符模式，使用函数将方法应用到任何对象上。
- Lesson 07: 原型类
  
  学习使用 .prototype 简化对象，并提高你的应用的性能。
- Lesson 08: 伪类模式
  
  学习如何在 JavaScript 中仿照其他语言的类系统，来重写你的对象结构。
- Lesson 09: 超类和子类
  
  学习如何利用超类和子类来进一步减少创建对象时，重复使用的代码的量。
- Lesson 10: 伪类子类
  
  学习如何在你的超类中使用 'this' 关键字，如何在类中使用 .call() 设置属性，以及如何委派原型到子类。
Module 02: 项目 - 记忆游戏
- Lesson 01: 项目 - 记忆游戏
  
  你将构建一个完全基于浏览器的卡片匹配游戏。这不仅仅是普通的卡片游戏！还是一个外观时尚、设计很棒、功能多样的记忆游戏！
  
  Project Description - 记忆游戏
  
  Project Rubric - 记忆游戏
  - Concept 01: 项目概述
  - Concept 02: 说明

Part 03 : 经典街机游戏克隆

我们将向你提供一些视觉资产和游戏主循环引擎；你必须使用这些工具向游戏添加一些实体，包括玩家人物与敌人，以重现经典小游戏《青蛙过河》(Frogger)。

相关技能：编写 README 文档，ES6

Module 01: 编写 README 文档
- Lesson 01: 编写 README 文档
  
  在本课程中，你将学习什么是文档，为何文档是开发流程的重要组成部分。你将学习如何编写结构清晰的 README，并运用在后续的项目中。学完本课程后，你将能够使用 Markdown 编写自己的 README 文件。
Module 02: ES6
- Lesson 01: ES6 - 语法
  
  这次对 JavaScript 语言做出重大更新后，添加了很多语法改善的地方。在这节课，你将学习利用这些语法更新改善你的 JavaScript 代码。
- Lesson 02: ES6 - 函数
  
  函数是 JavaScript 的核心！在 ES6 中，函数出现了很多必要的改进。在这节课，你将学习很多新内容，包括箭头函数和类。
- Lesson 03: ES6 - 内置功能
  
  JavaScript 环境默认地提供了各种功能。在这节课，我们将了解 Set、Map、Proxy、生成器以及迭代器的工作原理和更多知识！
- Lesson 04: ES6 - 专业开发者功能
  
  经过这么多的改进后，并非所有浏览器都能支持这一新版 JavaScript。在这节课，你将学习如何使用 polyfill 并将 ES6 JavaScript 代码转译为 ES5。
Module 03: 项目 - 经典街机游戏克隆
- Lesson 01: 项目 - 经典街机游戏克隆
  
  你将获得可视化资源和游戏循环引擎；使用这些工具时，你必须向游戏添加一系列实体（包括玩家角色和敌人），以重新创建经典街机游戏“青蛙过河”。
  
  Project Description - 经典街机游戏克隆
  
  Project Rubric - 经典街机游戏克隆

Part 04 : 订阅阅读器测试

在这个项目中，你将得到一个读取 RSS Feeds 的基于 Web 的应用。此应用最初的开发者显然看到了测试的价值，已在其中包含了 Jasmine 并甚至已开始编写首个测试套件！只是，他们决定立即着手创办自己的公司，于是现在我们得到的应用的测试套件不完整。那么，剩下的就将由你完成。

相关技能：JavaScript 测试、Jasmine 测试框架

Module 01: JavaScript 测试
- Lesson 01: 重新思考测试
  
  跟随 Mike Wales 了解为何编写测试是所有项目的重要一环，以及如何开始编写你自己的测试。
- Lesson 02: 编写测试套件
  
  学习如何使用 Jasmine 测试套件对代码运行测试，以及如何处理包括异步代码在内的各种情况。
Module 02: 项目 - 订阅阅读器测试
- Lesson 01: 项目 - 订阅阅读器测试
  
  现有另一位开发人员制作的反馈阅读器，请使用 Jasmine 测试语法针对该阅读器编写测试代码。
  
  Project Description - 订阅阅读器测试
  
  Project Rubric - 订阅阅读器测试
  - Concept 01: 项目概述
  - Concept 02: 项目详情

Part 05 : 街区地图

你将开发一个单页应用，展示你所在街区或你想要参观的街区的地图。然后你将向此应用添加其他功能，包括：地图标记，用于标识你要参观的著名位置或地点；搜索功能，用于快速找到这些位置；以及一个列表视图，用于简单浏览所有位置。然后，你将调查并实现提供每个位置附加信息的第三方 API（如街景图像、维基百科文章、Yelp 评论等）。

相关技能：AJAX、JavaScript 设计模式、使用第三方 API、Knockout 框架

Module 01: JavaScript 设计模式
Module 02: 使用 Promises
- Lesson 01: 创建 Promise
  
  了解什么是 promise，它如何使编写异步 JavaScript 变得更加简单，以及如何处理错误。
- Lesson 02: 链接 Promise
  
  通过链接 Promise 创建一系列异步工作并深入了解高级错误处理方法。
Module 03: 异步 JavaScript
- Lesson 01: Ajax 与 XHR
  
  在这节课，你将学习为何应该使用异步数据请求。你将使用 XHR 对象异步发送和接收数据。
- Lesson 02: Ajax 与 jQuery
  
  在这节课，你将对比使用 XHR 和使用 jQuery 的 Ajax 方法。你将使用 jQuery 的 Ajax 方法发送和接收数据，并了解 jQuery 的 Ajax 背后的工作原理。
- Lesson 03: Ajax 与 Fetch
  
  在这节课，你将使用 JavaScript Promise 创建 fetch 请求并异步地处理返回的数据。你还将学习如何处理失败请求产生的错误。
Module 04: Google 地图 API
- Lesson 01: API 入门
  
  设置你的开发者证书，并开始使用谷歌地图 API
- Lesson 02: 了解 API 服务
  
  探索谷歌地图API提供的定位服务，包括地理编码、海拔和方向API。
- Lesson 03: 在实践中使用 API
- Lesson 04: 项目 - 街区地图
  
  你将开发一个具有你所在区域或想访问的区域的地图的单页应用程序。然后，你将为此地图添加其他功能，包括突出显示的地点、有关这些地点的第三方数据以及浏览内容的不同方式。
  
  Project Description - 街区地图
  
  Project Rubric - 街区地图

Part 06 : 图书跟踪应用

在 MyReads 项目中，你将创建一个书架应用，使你能够选择和归类你阅读过的图书、正在阅读的图书以及想要阅读的图书。

**Part 07 (Elective) :** 选修材料

探索与网站开发相关的其他内容。

Module 01: 面向对象的 JavaScript
- Lesson 01: 深入了解对象
  
  JavaScript 中的对象封装了数据和功能。你可以创建、访问和修改对象，以便为面向对象编程打下坚实的基础。
- Lesson 02: 运行时的函数
  
  函数是最重要的数据结构之一。学习什么是“一级函数”、了解作用域、探索闭包，并使用立即调用函数表达式来实现私有状态。
- Lesson 03: 类和对象
  
  单独创建对象是不可持续的。学习如何使用类来轻松创建类似的对象。你还将学到对象继承如何通过原型继承来起作用。
Module 02: 网站易用性
- Lesson 01: 网站无障碍性概述
  
  了解网站和应用具有的各种不同的用户体验。了解如何实际地使用屏幕阅读器，并发现针对打造所有用户的网络体验所面临的挑战。
- Lesson 02: 焦点
  
  管理焦点 - 从键盘接收页面上相应位置的输入。了解一些用户如何通过键盘完全网站操作，以及如何优化他们的体验。
- Lesson 03: 语义基础
  
  了解可视 UI 和从语义上设计的无障碍 UI 之间的区别。向 HTML 添加语义元素，以创建适合所有人使用的用户界面。
- Lesson 04: 导航内容
  
  使用标题、链接文本和标记实现有效的语义导航。
- Lesson 05: ARIA
  
  有时候，HTML 元素可能没有语义角色或值。在这节课，你将使用 ARIA 属性为屏幕阅读器提供上下文信息。
- Lesson 06: 样式
  
  在无障碍网络设计中采用 CSS 样式并使用无障碍颜色技巧改善无障碍性。
Module 03: 网站工具化和自动化
- Lesson 01: 简介
  
  了解自动化和工具如何使你作为开发人员提高工作效率，并让你更快更高效地工作。
- Lesson 02: 高效编辑器
  
  使用键盘快捷键和代码编辑器扩展来加速你的开发过程，并有助于避免重复的打字任务。
- Lesson 03: 强大的构建工具
  
  利用 Gulp 和 Grunt 等构建工具的强大功能，将你的开发代码转换为简化的，自动化过程的即时生产代码。
- Lesson 04: 体验实时编辑
- Lesson 05: 如何免受灾难
  
  学习如何在编码时使用工具作为安全防火墙。使用它来自动检查您编写的代码并自动运行测试。
- Lesson 06: 绝佳优化
  
  了解如何使用工具优化你的应用以供生产使用。你将学习如何连接，缩小和优化代码。
- Lesson 07: 总结
  
  在本课中，你将了解有关整个项目脚手架的工具。
Module 04: 前端框架
Module 05: 离线 Web 应用
- Lesson 01: 离线优先的优点
  
  探索标准的 web 应用程序和离线优先的应用程序之间的差异，并了解新的 API。
- Lesson 02: Service Worker 入门
  
  编写你的第一个 Service Worker，并在使用 Service Worker 时深入了解 request 的生命周期。
Module 06: 客户端服务器通信
- Lesson 01: HTTP 的请求和响应周期
  
  你会学到请求的来龙去脉，具体了解如何请求页面，收到标题，HTTP 代码以及如何传输数据。
- Lesson 02: HTTP/1
  
  你将深入研究 HTTP 动词，还将深入挖掘 HTTP 中使用的重要标头，并了解如何使用 REST 高效地构建应用程序。
- Lesson 03: HTTPS
  
  你会发现安全对网络的重要性。你将了解 TLS，发现加载混合内容的问题，快速入门了解加密并验证证书颁发机构。
- Lesson 04: HTTP/2
  
  HTTP/1是伟大的，但未来是HTTP/2 的时代！你将了解HTTP/2带来的变化。你将学习HTTP/1所颂扬的当前“最佳实践”，但现在已经是HTTP/2中的反模式。
- Lesson 05: 安全性
  
  安全对每个Web应用程序都至关重要！你将了解常见的安全缺陷以及如何避免这些缺陷。你也有机会成为白帽子黑客，“入侵”（样本）银行的网站。